<template>
  <div class="flow-menu"
       ref="tool">
    <el-collapse class="flow-menu-content"
                 v-model="defaultExpandedNames">
      <el-collapse-item v-for="menu in menuList"
                        :key="menu.id"
                        :name="menu.name">
        <template #title>
          <span class="flow-menu-content_title">{{ menu.name }}</span>
        </template>
        <div class="dragArea">
          <div v-for="subMenu in menu.children"
               draggable="true"
               @dragstart="dragNodeStart($event, subMenu)"
               class="flow-menu-node"
               :key="subMenu.id"
               :type="subMenu.type">
            <div class="flow-menu-node_icon"><i class="iconfont"
                 :class="subMenu.icon"></i></div>
            <div class="flow-menu-node_name">{{ subMenu.typeName }}</div>
          </div>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>
<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  name: 'flow-panel-libs',
  emits: ['dragNodeStart'],
  setup(props, ctx) {
    const baseConfig = {
      status: false,
      originFields: [],
    }
    const defaultExpandedNames = ['数据集', '列编辑', '数据编辑', '数据集组合']
    const menuList = ref([
      {
        id: '1',
        name: '数据集',
        children: [
          {
            id: '11',
            type: 'input',
            typeName: '输入数据集',
            nodeName: '输入数据集',
            ...baseConfig,
            icon: 'icon-shy',
            config: { table: '', limit: 1000, fields: [] },
          },
          {
            id: '12',
            type: 'output',
            typeName: '输出数据集',
            nodeName: '输出数据集',
            ...baseConfig,
            icon: 'icon-wajue_shujushuchu',
          },
        ],
      },
      {
        id: '2',
        name: '列编辑',
        children: [
          {
            id: '21',
            type: 'add',
            typeName: '添加计算列',
            nodeName: '添加计算列',
            ...baseConfig,
            icon: 'icon-tianjiajisuan',
          },
          {
            id: '22',
            type: 'merge',
            typeName: '列合并',
            nodeName: '列合并',
            ...baseConfig,
            icon: 'icon-hebinglie',
            config: {
              rowName: '',
              rows: [],
              fields: [], // 原有数据列
              deleteRows: false,
              separator: '', // '' ',' ';' 'tab' ' '
            },
          },
          {
            id: '23',
            type: 'join',
            typeName: '连接',
            nodeName: '连接',
            ...baseConfig,
            icon: 'icon-zuolianjie',
            config: {
              sourceOne: '',
              sourceOneKey: '',
              sourceTwo: '',
              sourceTwoKey: '',
              type: '',
            },
          },
          {
            id: '26',
            type: 'select',
            typeName: '选择列',
            nodeName: '选择列',
            ...baseConfig,
            config: { fields: [] },
            icon: 'icon-select_columns',
          },
          {
            id: '27',
            type: 'rowToColumn',
            typeName: '行转列',
            nodeName: '行转列',
            ...baseConfig,
            icon: 'icon-hangzhuanlie',
          },
          {
            id: '28',
            type: 'columnToRow',
            typeName: '列转行',
            nodeName: '列转行',
            ...baseConfig,
            icon: 'icon-liezhuanhang',
          },
        ],
      },
      {
        id: '3',
        name: '数据编辑',
        children: [
          {
            id: '31',
            type: 'filter',
            typeName: '筛选数据行',
            nodeName: '筛选数据行',
            ...baseConfig,
            config: { condition: [] },
            icon: 'icon-icon_biaogeshaixuan',
          },
          {
            id: '32',
            type: 'distinct',
            typeName: '去重',
            nodeName: '去重',
            ...baseConfig,
            config: { fields: [] },
            icon: 'icon-quzhong',
          },
          {
            id: '33',
            type: 'change',
            typeName: '值转换',
            nodeName: '值转换',
            ...baseConfig,
            config: { change: [] },
            icon: 'icon-zhitihuan',
          },
          {
            id: '34',
            type: 'isnull',
            typeName: 'Null值替换',
            nodeName: 'Null值替换',
            ...baseConfig,
            config: { isnull: [] },
            icon: 'icon-changeNull',
          },
        ],
      },
      {
        id: '4',
        name: '数据集组合',
        icon: 'el-icon-video-pause',
        children: [
          {
            id: '41',
            type: 'union',
            typeName: '行拼接',
            nodeName: '行拼接',
            ...baseConfig,
            icon: 'icon-ETL_hangpinjie',
          },
        ],
      },
    ])
    const dragNodeStart = (ele, item) => {
      ctx.emit('dragNodeStart', item)
    }
    return {
      menuList,
      dragNodeStart,
      defaultExpandedNames,
    }
  },
})
</script>
<style lang="less" scoped>
.flow-menu {
  width: 240px;
  background-color: #191c21;
  user-select: none;
}

.flow-menu-content {
  .flow-menu-content_title {
    padding-left: 12px;
  }

  .dragArea {
    display: grid;
    grid-template-columns: repeat(3, minmax(0px, 1fr));
    width: 100%;

    .flow-menu-node {
      cursor: pointer;
      margin: 8px auto;
      grid-column: span 1 / span 1;

      .flow-menu-node_icon {
        width: 48px;
        height: 48px;
        text-align: center;
        margin: 0 auto;
        border: 2px solid #087eea54;
        border-radius: 8px;

        & > i {
          font-size: 26px;
          color: #2196f3;
          line-height: 44px;
        }

        &:last-child {
          margin-right: auto;
        }
      }

      .flow-menu-node_name {
        color: #ccc;
        margin-top: 6px;
        font-size: 12px;
        text-align: center;
      }
    }
  }
}
</style>